<script setup lang="ts">
  import { useModeModalBinder } from '@/hooks/arco/useModeModalBinder';
  import { useForm } from '@/hooks/arco/useForm';
  import { addRole, editRole } from '@/api/system/role';

  const modalForm = useForm({
    state: {
      roleId: '',
      roleName: '',
      roleDesc: '',
    },
  });

  const editModel = useModeModalBinder({
    modes: ['edit', 'add'] as const,
    renderTitle(mode) {
      if (mode === 'add') {
        return '新建';
      }
      return '编辑';
    },
    onShow(mode, otherParams) {
      if (mode === 'edit') {
        modalForm.setFieldsValue(otherParams);
      } else {
        modalForm.backToInit();
      }
    },
    onOkClick(mode) {
      const data = {
        roleId: modalForm.state.roleId,
        name: modalForm.state.roleName,
      };
      if (mode === 'edit') {
        return editRole(data);
      }
      return addRole(data);
      // return queryRolesList({});
    },
  });

  defineExpose(editModel.expose);
</script>

<template>
  <a-modal v-bind="editModel.bindProps">
    <div>
      <a-form v-bind="modalForm.bindProps">
        <a-form-item field="roleName" label="角色名称">
          <a-input v-model="modalForm.state.roleName" />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<style lang="less" scoped></style>
